<template>
    <div
        class="media-container"
        style="cursor: pointer; height: 300px; display: flex; align-items: center; justify-content: center;"
    >
        <!-- 图片 -->
        <div class="image-wrapper">
            <a-image
                loading="lazy"
                v-if="isImageFile(filename)"
                :src="getMediaSrc(folder, filename)"
                :alt="filename"
                :width="width"
            />
            <!-- .mov 视频缩略图 -->
            <a-image v-else-if="isMovFile(filename)"
                 :src="getThumbnailSrc(folder, filename)"
                 style="object-fit: cover; border-radius: 0.375rem;"
                 width="100%"
                 loading="lazy"
                 :alt="`Thumbnail for ${filename}`"
            />
            <!-- 其他视频格式 (mp4, webm 等) -->
            <video
                v-else-if="isVideoFile(filename)"
                style="max-width: 200px; max-height: 300px; object-fit: cover; border-radius: 0.375rem;"
                class="img-fluid rounded"
                preload="metadata"
                muted>
                <source :src="getMediaSrc(folder, filename)" :type="`video/${getExt(filename)}`"/>
                您的浏览器不支持视频标签。
            </video>
            <!-- 不支持的文件类型 -->
            <div
                v-else
                class="d-flex flex-column align-items-center justify-content-center text-muted text-center"
                style="height: 200px; width: 200px; background: #f8f9fa; border-radius: 0.375rem; font-size: 0.85rem;">
                <small>不支持预览</small>
                <code style="font-size: 0.75rem; word-break: break-word;">{{ filename }}</code>
            </div>
        </div>
    </div>
</template>

<script setup>
import {defineProps} from 'vue';
import {
    getThumbnailSrc,
    isVideoFile,
    isImageFile,
    isMovFile,
    getMediaSrc,
    getExt
} from '../utils/utils';

// 假设 openModal 是从外部传入或全局定义的
// 如果未定义，需补充：
// const openModal = (src) => { /* 打开模态框逻辑 */ }

const props = defineProps({
    filename: {
        type: String,
        required: true
    },
    folder: {
        type: String,
        required: true
    },
    status: {
        type: String,
        default: ''
    },
    width: {
        type: Number,
        default: 200
    },
});

// 注意：你原代码中 `src` 和 `ext` 在 template 中未定义
// 已改为使用 props 和工具函数动态获取
</script>

<style scoped>
.media-container {
    width: 100%;
    min-height: 200px;
    max-height: 300px;
    margin: auto auto;
}

.image-wrapper {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
